<!-- 右键菜单 -->
<template>
  <ul v-show="visible" :style="{left: `${position.left}px`,top: `${position.top}px`}" class="contextmenu">
    <li v-for="(item, id) in menuList" :key="id" @click="handleMenuItemClick(item)">{{item.name}}</li>
  </ul>
</template>

<script>
export default {
  props: {
    // 是否显示
    visible: {
      require: true,
      type: Boolean,
      default: false
    },
    // 展示位置
    position: {
      require: true,
      type: Object,
      default: () => {
        return {
          top: 0,
          left: 0
        }
      }
    },
    // 菜单
    menuList: {
      require: true,
      type: Array,
      default: () => {
        return [{
          name: "item1",
          method: () => {
            alert("我是item1")
          }
        }];
      }
    }
  },
  data () {
    return {

    }
  },
  methods: {
    /**
     * 处理菜单项点击事件
     */
    handleMenuItemClick (item) {
      item.method();
    },

    // 关闭所有标签页
    closeAllTabs () {
      //   this.$store.commit("closeAllTabs");
      this.contextMenuVisible = false;
    },
    // 关闭其它标签页
    closeOtherTabs (type) {
      //   this.$store.commit("closeOtherTabs", type);
      this.contextMenuVisible = false;
    },
    // 关闭contextMenu
    closeContextMenu () {
      this.contextMenuVisible = false;
    },
    /**
     * 打开右键菜单：如果要不依赖组件实现https://cloud.tencent.com/developer/article/1613163 TODO
     */
    openContextMenu (e) {
      if (e.srcElement.id) {
        let currentContextTabId = e.srcElement.id.split("-")[1];
        this.contextMenuVisible = true;
        // this.$store.commit("saveCurContextTabId", currentContextTabId);
        this.left = e.clientX;
        this.top = e.clientY + 10;
      }
    },
  }

}
</script>

<style lang="less" scoped>
@import "./css/contextMenu.less";
</style>